

/* 轮播 */
#banner{
    width: 100%;
    height: 600px;
}

#banner img{
    width: 100%;
    height: 600px;
    vertical-align: top;
    opacity: 0;
}
#banner .carousel{
    position: relative;
}
#banner .carousel>.carousel_img>img{
    position: absolute;
    top: 0;
    left: 0;
    transition: 1s;
}
#banner .carousel>button{
    width: 50px;
    height: 50px;
    background: rgba(0,0,0,.3);
    border-radius: 50%;
    border: 2px solid #000;
    cursor: pointer;
    color: #fff;
    position: absolute;
    top: 50%;
    margin-top: -25px;
}
#banner .carousel>button:nth-of-type(1){
    left: 50px;
}
#banner .carousel>button:nth-of-type(2){
    right: 50px;
}
.carousel>button:hover{
    background: rgba(0,0,0,.5);
}
#banner .carousel>button:active{
    background: rgba(0,0,0,.8);
}
#banner .carousel>ul{
    width: 50px;
    display: flex;
    justify-content: space-between;
    position: absolute;
    left: 50%;
    margin-left: -25px;
    bottom: 50px;
}
#banner .carousel>ul>li{
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #333;
    cursor: pointer;
}

#banner img.active{
    opacity: 1;
}
#banner .carousel>ul>li.active{
    background: red;
}

/* section */
section{
    width: 100%;
}
section .warpper{
    width: 1115px;
    margin: auto;
}
section .warpper>h2{
    height: 162px;
    text-align: center;
}
section h2>p:nth-of-type(1){
    font-size: 23px;
    color: #333;
    margin-top: 48px;
}
section h2>p:nth-of-type(2){
    font-size: 12px;
    color: #666;
    margin: 8px 0;
    position: relative;
}
section h2>p:nth-of-type(2)::after{
    content: "";
    background: #9b9b9b;
    display: block;
    width: 84px;
    height: 1px;
    position: absolute;
    left: 430px;
    bottom: 6px;
}
section h2>p:nth-of-type(2)::before{
    content: "";
    background: #9b9b9b;
    display: block;
    width: 84px;
    height: 1px;
    position: absolute;
    right: 430px;
    bottom: 6px;
}
section h2>p>span:nth-of-type(1){
    background: #9b9b9b;
    width: 3px;
    height: 3px;
    position: absolute;
    top: 8px;
    left: 514px;
}
section h2>p>span:nth-of-type(2){
    background: #9b9b9b;
    width: 3px;
    height: 3px;
    position: absolute;
    top: 8px;
    right: 514px;
}

section>.warpper>.us{
    height: 630px;
    
}
section .us>p>img{
    height: 520px;
    width: 400px;
    transition: 1s;
    position: absolute;
    top:-16px;
    left:34px ;
   
}

section .us>p{
    float: left;
    margin-top: 16px;
    height: 520px;
    width: 400px;
    border: #333 1px solid;
    position: relative;
    
}
section .text{
    width: 650px;
    float: right;
}
section .text>p{
    line-height: 30px;
    text-indent: 2em;
    font-size: 14px;
}
section .text>p:nth-of-type(1){
    margin-bottom: 15px;
}
section .text>h3{
    font-size: 23px;
    margin-top: 15px;
    color: #3a3438;
    margin-bottom: 54px;
}
section .text>span{
    width: 36px;
    height: 1px;
    margin-left: 1px;
    display: block;
    background: #333;
    margin-bottom: 37px;
}

/* ................................ */
body>img{
    width: 100%;
}


/*  */
#product{
    width: 100%;
    height: 645px;
   
}
#product .warpper{
    width: 1115px;
    margin: auto;
}
#product .warpper>h2{
    height: 162px;
    text-align: center;
}
#product h2>p:nth-of-type(1){
    font-size: 23px;
    color: #333;
    margin-top: 48px;
}
#product h2>p:nth-of-type(2){
    font-size: 12px;
    color: #666;
    margin: 8px 0;
    position: relative;
}
#product h2>p:nth-of-type(2)::after{
    content: "";
    background: #9b9b9b;
    display: block;
    width: 84px;
    height: 1px;
    position: absolute;
    left: 430px;
    bottom: 6px;
}
#product h2>p:nth-of-type(2)::before{
    content: "";
    background: #9b9b9b;
    display: block;
    width: 84px;
    height: 1px;
    position: absolute;
    right: 430px;
    bottom: 6px;
}
#product h2>p>span:nth-of-type(1){
    background: #9b9b9b;
    width: 3px;
    height: 3px;
    position: absolute;
    top: 8px;
    left: 514px;
}
#product h2>p>span:nth-of-type(2){
    background: #9b9b9b;
    width: 3px;
    height: 3px;
    position: absolute;
    top: 8px;
    right: 514px;
}


/* 产品介绍的图片内容 */

#product figure{
    width: 325px;
    /* height: 298px; */
    height: 483px;
    float: left;
    border: #fff 1px solid;
    overflow: hidden;
    position: relative;
}
#product figure>h3{
    width: 327px;
    height: 296px;
    /* border: #333 1px solid; */
}
#product figure:hover{
    box-shadow: 1px ,1px, 1px, 0;
    border: #333 1px solid;
    

}
#product figure:hover h3{
    color: #f74b07;
}
#product>.warpper>figure:nth-of-type(2){
    margin: 0 66px;
}
/* #product figure>h3:hover{
    background-size:120% ;
    -webkit-transition: background-size .3s linear;transition: background-size .3s linear;
} */
#product figure:nth-of-type(1)>h3{
    background: url(../img/b.png) no-repeat 0px -306px;
    
}
/* #product figure:nth-of-type(1)>h3:hover{
    background-size:120% ;
   
    background-position: -30px -100px;
} */
#product figure:nth-of-type(2)>h3{
    background: url(../img/c.png) no-repeat -56px -133px;
}
#product figure:nth-of-type(3)>h3{
    background: url(../img/g.png) no-repeat -38px -32px;
}

#product figure>figcaption{
    color: #666;
    font-size: 23px;
    margin-top: 17px;
    /* padding-top: 330px; */
    text-align: center;
    position: relative;
}
#product figure>figcaption::after{
    content: "";
    display: block;
    width: 32px;
    height: 1px;
    background: #333;
    position: absolute;
    bottom: -8px;
    left: 149px;

}
#product figure>p{
    color: #999;
    text-align: center;
    line-height: 23px;
    font-size: 14px;
    letter-spacing:1px;
    margin-top: 20px;

}



/* our_team */


#our_team{
    width: 100%;
    height: 789px;
   
}
#our_teamt .warpper{
    width: 1115px;
    margin: auto;
}
#our_team .warpper>h2{
    height: 162px;
    text-align: center;
}
#our_team h2>p:nth-of-type(1){
    font-size: 23px;
    color: #333;
    margin-top: 48px;
}
#our_team h2>p:nth-of-type(2){
    font-size: 12px;
    color: #666;
    margin: 8px 0;
    position: relative;
}
#our_team h2>p:nth-of-type(2)::after{
    content: "";
    background: #9b9b9b;
    display: block;
    width: 84px;
    height: 1px;
    position: absolute;
    left: 430px;
    bottom: 6px;
}
#our_team h2>p:nth-of-type(2)::before{
    content: "";
    background: #9b9b9b;
    display: block;
    width: 84px;
    height: 1px;
    position: absolute;
    right: 430px;
    bottom: 6px;
}
#our_team h2>p>span:nth-of-type(1){
    background: #9b9b9b;
    width: 3px;
    height: 3px;
    position: absolute;
    top: 8px;
    left: 514px;
}
#our_team h2>p>span:nth-of-type(2){
    background: #9b9b9b;
    width: 3px;
    height: 3px;
    position: absolute;
    top: 8px;
    right: 514px;
}



#our_team figure{
    width: 245px;
    height: 507px;
    float: left;
    overflow: hidden;
    margin: 0 14px;
}

/* #our_team figure.active{
    background: #3d3d3d;
} */
/* #our_team figure.active>figcaption{
    color: #bebebe;

} */
/* #our_team figure.active>p{
    color: #bebebe;
} */
#our_team figure:hover{
    background: #3d3d3d;
    
}
#our_team figure:hover>figcaption{
    color: #bebebe;
}
#our_team figure:hover>p{
    color: #bebebe;
}
#our_team figure>h3{
    height: 405px;
    width: 245px;
}
#our_team figure>p{
    display: none;
}
#our_team figure>p.active{
    display:block
}
#our_team figure:hover p{
    display: block;
}
#our_team figure:hover p.active{
    display: none;
}
/* #our_team figure:nth-of-type(2){ */
    /* margin: 0 67px; */
/* } */
#our_team figure:nth-of-type(1)>h3{
    background: url(../img/a.png) no-repeat -94px 0px;
}
#our_team figure:nth-of-type(2)>h3{
    background: url(../img/h.png) no-repeat -45px -0px;
}
#our_team figure:nth-of-type(3)>h3{
    background: url(../img/d.png) no-repeat -162px -0px;
}
#our_team figure:nth-of-type(4)>h3{
    background: url(../img/e.png) no-repeat -115px -0px;
}

#our_team figure>figcaption{
    color: #333;
    font-size: 18px;
    margin-top: 12px;
    /* padding-top: 330px; */
    text-align: center;
    position: relative;
}
#our_team figure>figcaption::after{
    content: "";
    display: block;
    width: 32px;
    height: 1px;
    background: #bebebe;
    position: absolute;
    bottom: -8px;
    left: 100px;

}
#our_team figure>p{
    color: #333;
    text-align: center;
    line-height: 23px;
    font-size: 12px;
    letter-spacing:1px;
    margin-top: 16px;
    padding:0 21px ;

}




/* contact */


#contact{
    width: 100%;
    height: 558px;
   
}
#contact .warpper{
    width: 1115px;
    margin: auto;
}
#contact .warpper>h2{
    height: 162px;
    text-align: center;
}
#contact h2>p:nth-of-type(1){
    font-size: 23px;
    color: #333;
    margin-top: 48px;
}
#contact h2>p:nth-of-type(2){
    font-size: 12px;
    color: #666;
    margin: 8px 0;
    position: relative;
}
#contact h2>p:nth-of-type(2)::after{
    content: "";
    background: #9b9b9b;
    display: block;
    width: 84px;
    height: 1px;
    position: absolute;
    left: 430px;
    bottom: 6px;
}
#contact h2>p:nth-of-type(2)::before{
    content: "";
    background: #9b9b9b;
    display: block;
    width: 84px;
    height: 1px;
    position: absolute;
    right: 430px;
    bottom: 6px;
}
#contact h2>p>span:nth-of-type(1){
    background: #9b9b9b;
    width: 3px;
    height: 3px;
    position: absolute;
    top: 8px;
    left: 514px;
}
#contact h2>p>span:nth-of-type(2){
    background: #9b9b9b;
    width: 3px;
    height: 3px;
    position: absolute;
    top: 8px;
    right: 514px;
}
#contact .warpper>img{
    float: left;
    height: 345px;
    width: 662px;
    margin-left: 23px;
}
#contact .right{
    float: right;
    width: 370px;
    
}
#contact .right>h4{
    position: relative;
    
    margin-bottom: 20px;
}
#contact .right .iconfont{
    font-size: 42px;
    color: #999;
    position: absolute;
    top: 0;
    left: 0;
    /* float: left; */
}
#contact .right span{
    display: block;
    margin-left: 58px;
    /* float: right; */
    font-size: 20px;
    color: #333;
}
#contact .right span:nth-of-type(2){
    font-size: 14px;
}
#contact .right p{
    margin-left: 58px;
    /* float: right; */
    font-size: 12px;
    color: #999;
    margin-top: 5px;
    margin-bottom: 5px;
}


/* footer */
footer{
    width: 100%;
    background: #866961;
    height: 80px;
    line-height: 80px;
}
footer .warpper{
    width: 1115px;
    margin: auto;
}
footer .warpper>p{
    font-size: #fefefe;
    font-size: 14px;
    text-align: left;
    margin-left: 25px;
    float: left;
}
footer .warpper>img{
    float: right;
    margin-right: 94px;
}




#container {
    overflow: hidden;
    width:662px;
    height: 345px;
    margin: 0;
    font-family: "微软雅黑";
    margin-left: 23px;
    float: left;
    
}